import { Query } from '../utils/Query'
import { DOCMAP } from '../constants'
export const popUp = (map, callback) => {
  let levels = [
    { where: '事件等级=1 ', color: '#ff0000' },
    { where: '事件等级=2 ', color: '#ff0000' },
    { where: '事件等级=3 ', color: '#ffff00' },
    { where: '事件等级=4 ', color: '#00af00' },
  ]
  let service = { docName: DOCMAP, layerId: 2 }
  levels.map((item) => {
    Query.queryBySql({
      where: item.where,
      service,
      callback: (res) => getBack(res),
    })
    const getBack = (res) => {
      // console.log(res)
      var format = new Zondy.Format.PolygonJSON()
      //将MapGIS要素JSON反序列化为ol.Feature类型数组
      var myFeatures = format.read(res)
      // console.log(myFeatures)
      var labelStyle = new ol.style.Style({
        text: new ol.style.Text({
          //位置
          textAlign: 'center',
          //基准线
          textBaseline: 'middle',
          //文字样式
          font: 'normal 10px 微软雅黑',
          //文本内容
          text: '查看事件详情',
          //文本填充样式（即文字颜色）
          fill: new ol.style.Fill({
            color: item.color,
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2,
          }),
        }),
      })
      // getGeometry().flatCoordinates
      // myFeatures.map((item) => {
      // console.log(item.values_.values_)
      // var event = item.values_.values_
      // console.log(item.getGeometry().flatCoordinates)
      /* var Point = new ol.Feature({
          geometry: new ol.geom.Point(item.getGeometry().flatCoordinates),
         
        })
        Point.setStyle(labelStyle) */
      // })
      var source = new ol.source.Vector({
        features: myFeatures,
      })
      var layer = new ol.layer.Vector({
        source,
      })
      map.addLayer(layer)
    }
  })

  /**
   * 实现popup的html元素
   */
  var container = document.getElementById('popup')
  var content = document.getElementById('popup-content')
  var closer = document.getElementById('popup-closer')
  /**
   * 1、在地图容器中创建一个Overlay
   */
  var popup = new ol.Overlay(
    /** @type {olx.OverlayOptions} */
    ({
      //要转换成overlay的HTML元素
      element: container,
      //当前窗口可见
      autoPan: true,
      //Popup放置的位置
      positioning: 'bottom-center',
      //是否应该停止事件传播到地图窗口
      stopEvent: false,
      autoPanAnimation: {
        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
        duration: 250,
      },
    })
  )
  map.addOverlay(popup)
  /**
   * 2、添加关闭按钮的单击事件（隐藏popup）
   * @return {boolean} Don't follow the href.
   */
  closer.onclick = function () {
    //未定义popup位置
    popup.setPosition(undefined)
    //失去焦点
    closer.blur()
    return false
  }
  /**
   * 3、为map添加点击事件监听，渲染弹出popup
   */
  map.on('click', function (evt) {
    // console.log(evt.pixel)
    //判断当前单击处是否有要素，捕获到要素时弹出popup
    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
      // console.log(feature)
      callback(feature.values_.values_)
      return feature
    })
    // console.log(feature.values_.values_)
    if (feature) {
      var position = feature.getGeometry().flatCoordinates
      if (popup.getPosition() == undefined) {
        //设置popup的位置
        popup.setPosition(position)
      }
    }
  })
  /**
   * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
   */
  map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent)
    // console.log(111, pixel)
    var hit = map.hasFeatureAtPixel(pixel)
    map.getTargetElement().style.cursor = hit ? 'pointer' : ''
  })
}
